<!-- 表格设计区 -->
<template>
  <div>
    <div v-for="(option, index) in options" :key="index">
      <Row :gutter="32" prop="control" class="code-row-bg">
        <Col span="14">
          <Input type="text" :maxlength="30" v-model="option.label" placeholder="请输入"></Input>
        </Col>
        <Col span="4">
          <Icon type="ios-trash-outline" color="#f89c34" size="22" @click="removeOption(index)" />
        </Col>
      </Row>
    </div>
    <div class="btn">
      <RPButton @click="addOption" text="添加子指标"></RPButton>
      <RPButton @click="handleCreator" text="进入表格设计器"></RPButton>
    </div>
  </div>
</template>

<script>
import TableDesigner from './TableDesigner.vue'
import { findMaxValue } from '../../utils/util'
export default {
  data() {
    return {
      options: [
        {
          label: "系统中文名称",
          value: 0,
          prop: "prop_0",
          className: 'column',
          minWidth: 200
        },
        {
          label: "系统数据存储量",
          value: 1,
          prop: "prop_1",
          className: 'column',
          minWidth: 200
        },
        {
          label: "结构化数据",
          value: 2,
          prop: "prop_2",
          className: 'column',
          minWidth: 200
        }
      ],
      tableAttrs: {}
    }
  },
  props: {
    tableDesc: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    addOption() {
      const newValue = findMaxValue(this.options) + 1
      const newProp = 'prop_' + newValue
      const item = {
        label: '',
        value: newValue,
        prop: newProp,
        className: 'column',
        minWidth: 200
      }
      this.options.push(item)
    },
    removeOption(index) {
      this.options.splice(index, 1)
    },
    handleCreator() {
      const defaultRow = this.tableDesc ? this.tableDesc.default : null;
      const fallbackDefaultRow = this.tableAttrs ? this.tableAttrs.default : null;
      const columnAttrs = this.tableDesc ? this.tableDesc.attributes : this.tableAttrs.attributes || [];
      new this.$pageModal(
        TableDesigner,
        {
          props: {
            columns: this.options,
            row: defaultRow || fallbackDefaultRow, // 表格行
            columnAttrs: columnAttrs
          },
          
        },
        data => {
          data && (this.tableAttrs = data)
        }
      );
    },
  },
  created() {
    if (this.tableDesc && Object.keys(this.tableDesc).length) {
      this.options = this.tableDesc.attrs.columns
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  button {
    width: 120px;
  }
}
</style>